*{
    margin: 0;
    padding: 0;
     vertical-align: baseline;/* */
      -webkit-box-sizing: border-box;/* (谷歌)兼容性*/
 -moz-box-sizing: border-box;/* (火狐)*/

     box-sizing: border-box;
}
html{
    height: 100%;
}
body{
    height: 100%;
    color:#fff;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    background-color: #444444;
    background-image: -webkit-linear-gradient(top,#444444,#999999);
   /* position: relative; */
}
.book{
    width: 300px;
    height: 300px;
   position: absolute; /*  往父容器上找*/
left: 50%;
top: 50%;
margin-top: -150px;
 margin-left: -150px; 
 -webkit-transform:rotateX(60deg) rotateZ(3deg) ;
transform: rotateX(60deg) rotateZ(3deg);
user-select: none; /* 用户选择*/
}
.front-cover{
cursor: move;
width: 300px;
height: 300px;
transform: rotateY(0deg);
transform-origin: 0 50%;
}
.front-cover .back{
    background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2050318681,1081448419&fm=26&gp=0.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translateZ(3px);
}
.page{
    width: 300px;
    height: 300px;
    padding: 1em;
    position: absolute;
    left: 0;
    top:0;
overflow: hidden;
}
.p3d{
    transform-style: preserve-3d;
}